<template>
  <el-form-item label="基本信息：" class="section-title" />
  <el-row :gutter="20">
    <el-col :span="6">
      <el-form-item label="姓名：">
        <span>{{ FirstData.name }}</span>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="性别：">
        <span>{{
          FirstData.sex === 0 ? "男" : FirstData.sex === 1 ? "女" : ""
        }}</span>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="联系电话：">
        <span>{{ FirstData.phoneNumber }}</span>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="邮箱：">
        <span>{{ FirstData.mail }}</span>
      </el-form-item>
    </el-col>
  </el-row>

  <el-row :gutter="20">
    <el-col :span="6">
      <el-form-item label="身份证号：">
        <span>{{ FirstData.idNumber }}</span>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="出生日期：">
        <span>{{ FirstData.birthTime }}</span>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="年龄：">
        <span>{{ FirstData.age }}</span>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="毕业院校：">
        <span>{{ FirstData.graduateSchool }}</span>
      </el-form-item>
    </el-col>
  </el-row>

  <el-row :gutter="20">
    <el-col :span="24">
      <el-form-item label="专业名称：">
        <span>{{ FirstData.profession }}</span>
      </el-form-item>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from "vue";
const props = defineProps({
  FirstData: Array,
});
</script>

<style scoped>
.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 4px solid #409eff;
}
span {
  font-size: 14px;
  font-weight: 400;
  color: #16191d;
  /* 新增自动换行样式 */
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%; /* 确保在容器内换行 */
}

/* 可选：针对表格单元格添加省略号 */
.el-col span {
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}
</style>
